<template>
    <div class="memorial-manage">
        <span class="title">纪念馆管理</span>
        <div class="container">
            <el-date-picker
                v-model="date"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择时间">
            </el-date-picker>
            <el-input placeholder="请输入纪念馆ID" v-model="memorialID"></el-input>
            <el-input placeholder="请输入馆主ID" v-model="userID"></el-input>
            <el-input placeholder="请输入地域" v-model="address"></el-input>
            <el-button type="primary">搜索</el-button>
            <el-table
            :data="tableData"
            border
            style="width: 100%;overflow: auto;">
                <el-table-column
                fixed
                prop="id"
                label="纪念馆ID"
                width="50">
                </el-table-column>
                <el-table-column
                prop="address"
                label="所在地域">
                </el-table-column>
                <el-table-column
                prop="userID"
                label="馆主ID">
                </el-table-column>
                <el-table-column
                prop="wechat"
                label="客服微信号">
                </el-table-column>
                <el-table-column
                prop="type"
                label="纪念馆类型">
                </el-table-column>
                <el-table-column
                prop="video"
                label="视频量">
                </el-table-column>
                <el-table-column
                prop="photo"
                label="照片量">
                </el-table-column>
                <el-table-column
                prop="story"
                label="怀念文章"
                width="200">
                </el-table-column>
                <el-table-column
                prop="message"
                label="留言"
                width="200">
                </el-table-column>
                <el-table-column
                label="密码设置">
                    <template slot-scope="scope">
                        <el-button type="text" @click="lookpassword(scope)">点击查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                prop="userNumber"
                label="馆主身份证件"
                width="200">
                </el-table-column>
                <el-table-column
                prop="userNumber"
                label="馆主身份证照片"
                width="200">
                    <template slot-scope="scope">
                        <img :src="scope.row.userPic" />
                    </template>
                </el-table-column>                
                <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">闭馆</el-button>
                </template>
                </el-table-column>
            </el-table>
        </div>
        
    </div>
</template>

<script>
export default {
    data () {
        return {
            date: '',
            memorialID: '',
            userID: '',
            address: '',
            tableData: [
                {
                    id: '1',
                    address: '吉林省',
                    userID: '520',
                    wechat: '666',
                    type: '普通',
                    video: '1',
                    photo: '20',
                    story: '12',
                    message: '10',
                    passwordStatus: '111',
                    userNumber: '220102327377',
                    userPic: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541591859425&di=414076b4e751a057b46595649c6e2af3&imgtype=0&src=http%3A%2F%2Fphoto.16pic.com%2F00%2F14%2F48%2F16pic_1448643_b.jpg' 
                }
            ]
        }
    },
    methods: {
        lookpassword (scope) {
            this.$alert(scope.row.passwordStatus, '查看密码', {
              confirmButtonText: '知道了',
              // callback: action => {
                
              // }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
img {
    width: 130px;
    height: 100px;
}
</style>
